<template>
    <!-- 实退采购款列表 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="供应商：">
            <el-input v-model="formInline.VName"  style="width: 120px;" placeholder="请选择或输入" @dblclick="dialogVisible1 = true"/>
        </el-form-item>

        <el-form-item label="本次退款金额">
            <el-input style="width: 150px;" v-model="formInline.BenPrice"/>-<el-input  style="width: 150px;" v-model="formInline.SBenPrice"/>
        </el-form-item>

        <el-form-item label="退款日期：" >
            <el-date-picker
                v-model="formInline.BenDate"
                type="date"
                style="width: 200px;"
                placeholder="请选择开始日期"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
            -
            <el-date-picker
                v-model="formInline.SBenDate"
                type="date"
                style="width: 200px;"
                placeholder="请选择结束日期"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
        </el-form-item>

        <el-form-item label="退款人员：">
            <el-input v-model="formInline.PReturnsPersonnel"  style="width: 120px;"/>
        </el-form-item>

        <el-form-item label="退款账号：">
            <el-input v-model="formInline.YingHang"  style="width: 180px;"/>
        </el-form-item>

        <el-form-item label="退款编号：">
            <el-input v-model="formInline.PurchaseReturnsCode"  style="width: 120px;"/>
        </el-form-item>

        <el-form-item label="退款主题：">
            <el-input v-model="formInline.PurchaseReturnsTopic"  style="width: 120px;"/>
        </el-form-item>

        <el-form-item>
      <el-button @click="getPro">查询</el-button>
    </el-form-item>


    </el-form>

    <h2 style="font-weight: 800;text-align: center;">实退采购款列表</h2>

    <br/>

    <el-table :data="tableData1" border style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center"/>
        <el-table-column prop="purchaseReturnsCode" label="实际退款编号" width="268"  align="center"/>
        <el-table-column prop="idddddd" label="退款类型" width="180"  align="center">
            <template v-slot="scope">
                <span v-if="scope.row.idddddd == 1">直接退款</span>
                <span v-else-if="scope.row.idddddd == 2">转供应商预付款</span>
            </template>
        </el-table-column>
        <el-table-column prop="purchaseReturnsTopic" label="实际退款主题" width="150"  align="center"/>
        <el-table-column prop="vName" label="供应商名称" width="100"  align="center"/>
        <el-table-column prop="benPrice" label="本次退款金额" width="120"  align="center"/>
        <el-table-column prop="benDate" label="本次退款日期" width="180"  align="center">
            <template v-slot="scope">
                <span>{{ scope.row.benDate.substring(0,10)}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="pReturnsPersonnel" label="退货人员" width="180"  align="center"/>
        <el-table-column prop="yingHang" label="退款银行账号" width="218"  align="center"/>
        <el-table-column prop="name" label="" width="180"  align="center">
            <template v-slot="scope">
                <el-button @click="UpdPur(scope.row.directRefundId,scope.row.idddddd)">修改</el-button>
                <el-button @click="DelPur(scope.row.directRefundId)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    
    <!-- 供应商弹框 -->
    <el-dialog
        v-model="dialogVisible1"
        title="供应商管理"
        width="800"
    >
        <el-table :data="tableData" border style="width: 100%"   @selection-change="handleSelectionChange1" >
            <el-table-column type="selection" width="55" />
            <el-table-column  label="序号" width="100"  type="index"  />
            <el-table-column prop="vNumber" label="供应商编号" width="100" />
            <el-table-column prop="vName" label="供应商名称" width="100" />
            <el-table-column prop="vGrade" label="供应商等级" width="100" />
            <el-table-column prop="sName" label="所在省份"   width="100"/>
            <el-table-column prop="cName" label="所在市" width="100" />
            <el-table-column prop="vendorTypeName" label="供应商类别"  width="100" />
            <el-table-column prop="hName" label="所属行业" width="100" />
            <el-table-column prop="vContact" label="联系人"  width="100" />
            <el-table-column prop="vDepartment" label="部门" width="100" />
            <el-table-column prop="vDuty" label="职位"   width="100"/>
            <el-table-column prop="bPhone" label="办公电话"  width="100"/>
            <el-table-column prop="vPhone" label="手机号码"  width="100"/>
         </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="Close1()">取消</el-button>
                    <el-button type="primary" @click="submi1()">
                    确定
                    </el-button>
                </div>
            </template>
  </el-dialog>


    <!-- 分页 -->
    <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" layout="total,slot,sizes" :total="page.sumCount">
                    <span> , 每页 {{ page.PageSize }} 条，当前 {{ page.PageIndex }} / {{ page.pageLast }} 条</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="page.sumCount">
                    <el-button :disabled="page.PageIndex == 1" @click="page.PageIndex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="page.sumCount">
                    <el-button :disabled="page.PageIndex == page.pageLast" @click="page.PageIndex = page.pageLast">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>

    <!-- 直接退款弹框 -->
    <el-dialog
    v-model="dialogVisibles"
    width="700"
  >
  <h2 v-if="appuser.namesss==1">新增采购退款(直接退款)</h2>
  <h2 v-if="appuser.namesss==2">新增采购退款(供应商预付款)</h2>
  <br/>
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="form"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
    >
        <el-form-item label="供应商名称">
            <el-input v-model="form.vName" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="退货人员:">
            <el-input v-model="form.pReturnsPersonnel" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="计划退款金额:">
            <el-input v-model="form.pRtotalAmount" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="关联退货单：">
            <el-input v-model="form.purchaseReturnsTopic" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="计划退货日期：">
            <el-date-picker v-model="form.prReturnDate"  type="date" value-format="YYYY-MM-DD" placeholder="请选择日期"
                style="width: 200px;"  />
        </el-form-item>
        <el-form-item label="单据编号：">
            <el-input v-model="form.purchaseReturnsCode" style="width: 200px;" />
        </el-form-item>


        <el-form-item label="本次退款金额：" prop="benPrice" @change="GetPrice()">
            <el-input v-model="form.benPrice" style="width: 200px;" />
        </el-form-item>
         <el-form-item label="剩余退款金额：" >
            <el-input v-model="form.sengPrice" disabled style="width: 200px;" />
        </el-form-item>
        <el-form-item label="本次退款日期：" prop="benDate">
            <el-date-picker v-model="form.benDate"  type="date" value-format="YYYY-MM-DD" placeholder="请选择日期"
                style="width: 200px;"  />
        </el-form-item>
        <el-form-item label="下次退款日期：" prop="xiaDate">
            <el-date-picker v-model="form.xiaDate"  type="date" value-format="YYYY-MM-DD" placeholder="请选择日期"
                style="width: 200px;"  />
        </el-form-item>
        <el-form-item label="退款支付方式：">
            <el-select v-model="form.payType" style="width: 200px;" placeholder="请选择退货类别">
                <el-option label="现金" value="现金" />
                <el-option label="转账" value="转账" />
                <el-option label="支票" value="支票" />
                <el-option label="微信" value="微信" />
            </el-select>
        </el-form-item>
        <el-form-item label="退款银行账号：">
            <el-select v-model="form.yingHang" style="width: 200px;" placeholder="请选择退货类别" >
                <el-option label="无" value="无" />
                <el-option label="中国建设银行杭州市上城区支行" value="中国建设银行杭州市上城区支行" />
                <el-option label="中信银行河西路支行" value="中信银行河西路支行" />
                <el-option label="中国民生银行股份有限公司成都新都支行" value="中国民生银行股份有限公司成都新都支行" />
                <el-option label="上海浦发银行股份有限公司上海支行" value="上海浦发银行股份有限公司上海支行" />
                <el-option label="中国农业银行成都市金牛区支行" value="中国农业银行成都市金牛区支行" />
                <el-option label="中国农业银行双云路支行" value="中国农业银行双云路支行" />
                <el-option label="中国农业银行后海路支行" value="中国农业银行后海路支行" />
                <el-option label="中国农业银行琉璃街支行" value="中国农业银行琉璃街支行" />
                <el-option label="中国工商银行林京路支行" value="中国工商银行林京路支行" />
                <el-option label="建设银行大冶街支行" value="建设银行大冶街支行" />
                 <el-option label="中国农业银行小南街支行" value="中国农业银行小南街支行" />
            </el-select>
        </el-form-item>
         <el-form-item label="备注：">
             <el-input
                v-model="form.remark"
                style="width: 240px"
                :rows="2"
                type="textarea"
            />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" style="margin-left: 500px;" @click="submitForm(ruleFormRef)">
                修改
            </el-button>
            <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
            </el-form-item>


    </el-form>
    
  </el-dialog>


</template>
    
<script setup lang='ts'>
import axios from 'axios';
import { ref, reactive, onMounted,watch} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter();
import http from '../../../http.js'

onMounted(() => {
    getPro();//获取实退采购退款
    table();
})




const formInline = reactive({
    VName: '',
    BenPrice: '',
    SBenPrice: '',
    BenDate: '',
    SBenDate: '',
    PReturnsPersonnel: '',
    YingHang: '',
    PurchaseReturnsCode: '',
    PurchaseReturnsTopic:'',
})

const page = reactive({
    PageIndex: 1,
    PageSize: 5,
    pageLast: 0,
    sumCount:0
})

//监听分页
watch(page, () => {
    getPro();

})

const tableData1=ref([])
const getPro = () => {
    axios.get(http.zblnb+'/cg/api/PurchaseRefund/GetProcurementReturnLists', {
        params: {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
            VName: formInline.VName,
            BenPrice: formInline.BenPrice,
            SBenPrice: formInline.SBenPrice,
            BenDate: formInline.BenDate,
            SBenDate: formInline.SBenDate,
            PReturnsPersonnel: formInline.PReturnsPersonnel,
            YingHang: formInline.YingHang,
            PurchaseReturnsCode: formInline.PurchaseReturnsCode,
            PurchaseReturnsTopic: formInline.PurchaseReturnsTopic,
        }
    })
    .then(res => {
        // console.log(res)    
        page.sumCount = res.data.data.sumCount;
        page.pageLast = res.data.data.pageLast;
        tableData1.value = res.data.data.list;
    })
    .catch(err => {
        console.log(err)    
    })
}

//删除实退采购款
const DelPur = (id: any) => {
    // alert(id)
    ElMessageBox.confirm(
        '确定删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post(http.zblnb+'/cg/api/PurchaseRefund/DelDirectRefund', {
                ids: [id],
                delName:'卢芳'
            })
            .then(res => {
                if (res.data.data > 0) {
                    ElMessage.success('删除成功')
                    getPro();
                }    
                else {
                    ElMessage.error('删除失败')
                    return
                }
            })
        })
        .catch(() => {

        })
}


//退款(直接退款)添加
const form = reactive({
    "directRefundId": '',
  "purchaseReturnsIds": '',
  "vName": "",
  "pReturnsPersonnel": "",
  "pRtotalAmount": '',
  "refundAmoun": '',
  "purchaseReturnsTopic": "",
  "prReturnDate": "",
  "purchaseReturnsCode": "",
  "benPrice": '',
  "sengPrice": '',
  "benDate": "",
  "xiaDate": "",
  "payType": "",
  "yingHang": "",
  "remark": "",
  "idddddd": '',
  "addName": "",
  "addTime": "",
  "office_Id": "1",
  "user_Id": 1,
  "updName": "11",
  "updTime": ""
})
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const locationOptions = ['Home', 'Company', 'School']

//根据输入的价钱来求出剩余金额 改变事件
const GetPrice = () => {
    // console.log(form.pRtotalAmount)
    // console.log(form.benPrice)
    form.sengPrice=Number(form.pRtotalAmount)-Number(form.benPrice)
}

//验证
const rules = reactive<FormRules>({
    benPrice: [
    { required: true, message: '本次退款金额不能为空', trigger: 'blur' },
    ],
   benDate: [
    { required: true, message: '本次退款日期不能为空', trigger: 'blur' },
    ],
   xiaDate: [
    { required: true, message: '下次退款日期不能为空', trigger: 'blur' },
   ],
})
//反填实退采购款
const dialogVisibles = ref(false)
const appuser = reactive({
    namesss:''
})
const idssssssssss = ref(0);
const UpdPur = (id: any,idddddd:any) => {
    localStorage.setItem('idddddd', idddddd);//存id
    // alert(idddddd)
    appuser.namesss = idddddd;
    // if (idddddd == 1) {
    //   localStorage.setItem('names', '直接退款')
    // //    console.log(localStorage.getItem('names'))
    // }
    // else if (idddddd == 2) {
    //     localStorage.setItem('names', '供应商预付款')
    // }
    // console.log(appuser.value)
    dialogVisibles.value = true
    axios.get(http.zblnb + '/cg/api/PurchaseRefund/FanDirectRefund?id='+id)
        .then(res => {
            console.log(res.data.data)
            let d = res.data.data;
            form.directRefundId = d.directRefundId;
            form.purchaseReturnsIds = d.purchaseReturnsIds;
            form.vName = d.vName;
            form.pReturnsPersonnel = d.pReturnsPersonnel;
            form.pRtotalAmount = d.pRtotalAmount;
            form.refundAmoun = d.refundAmoun;
            form.purchaseReturnsTopic = d.purchaseReturnsTopic;
            form.prReturnDate = d.prReturnDate;
            form.purchaseReturnsCode = d.purchaseReturnsCode;
            form.benPrice = d.benPrice;
            form.sengPrice = d.sengPrice;
            form.benDate = d.benDate;
            form.xiaDate = d.xiaDate;
            form.payType = d.payType;
            form.yingHang = d.yingHang;
            form.remark = d.remark;
            form.idddddd = d.idddddd;
            form.addName = d.addName;
            form.addTime = d.addTime;
            form.office_Id = d.office_Id;
            form.user_Id = d.user_Id;
            form.updName = d.updName;
            form.updTime = d.updTime;

        })
}

//修改按钮
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
      if (valid) {
            if (form.benPrice > form.pRtotalAmount) {
                ElMessage.warning('本次退款金额不能大于本次计划金额');
                return;
          }
            //下次退款日期不能低于本次退款日期
            if (form.xiaDate < form.benDate) {
                ElMessage.warning('下次退款日期不能低于本次退款日期');
                return;
            }
        axios.post(http.zblnb+'/cg/api/PurchaseRefund/UpdDirectRefund',form)
        .then(res => {
            if (res.data.data > 0) {
                ElMessage.success('修改成功')
                dialogVisibles.value = false
                getPro();
            }    
            else {
                ElMessage.error('修改失败')
                return
            }
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//#region 供应商管理
const dialogVisible1=ref(false)
//供应商显示
var tableData=ref([]);
const table=()=>{
    axios.get(http.zblnb+'/cg/api/Vendor/ProductTypeSelectShow',{
    params:{
        FId:'',
        Node:'',
        Name:'',
        Sid:'',
        Cid:'',
        Hid:'',
        BPhone:'',
        SPhone:'',
        ZProper:'',
        PageIndex:1,
        PageSize:100
    }
    }).then(res=>{
        // console.log(res.data.data)
        if(res.data.code==200){
            tableData.value=res.data.data.list
    }
    })
}

//供应商弹框里的多选框
const vName=ref('')
const handleSelectionChange1 = (val:any) => {
    // check1.value = val
    vName.value = val;
    
}
//取消
const Close1 = () => {
    dialogVisible1.value= false
    formInline.VName = '';
}
//确定
const submi1 = () => {
    dialogVisible1.value = false
    formInline.VName = vName.value[0].vName;
}





//#endregion






    
</script>
    
<style>
    
</style>